<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>页面管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入图像标题" clearable v-model="title" @clear="searchView">
          <el-button slot="append" icon="el-icon-search" @click="searchView"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible=true">添加图像</el-button>
      </el-col>
    </el-row>
    <el-table
        ref="multipleTable"
        :data="viewList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column label="编号" width="100" prop="id"></el-table-column>
      <el-table-column label="标题" width="100" prop="title"></el-table-column>
      <!--<el-table-column label="图像" width="100" prop="image"></el-table-column>
      <el-table-column label="路径" width="100" prop="url"></el-table-column>-->
      <el-table-column label="图像" width="180">
        <template slot-scope="scope"><img :src="scope.row.url" style="width: 60px;height: 60px;"></template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.display==0">不显示</span>
          <span v-if="scope.row.display==1">显示</span>
        </template>
      </el-table-column>
      <el-table-column label="启用开关">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.display"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="switchViewState(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
          <el-button type="danger" size="mini" @click="removeViewById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--添加图像-->
    <el-dialog title="添加图像" :visible.sync="addDialogVisible" width="50%" :close-on-click-modal="false" @close="addViewFormClose">
      <el-form
          :model="addViewForm"
          :rules="addViewFormRules"
          ref="addViewFormRef"
          label-width="100px"
          class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="addViewForm.title" ></el-input>
        </el-form-item>
        <el-form-item label="图像" prop="image">
          <el-input v-model="addViewForm.image" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="display" >
          <el-select v-model="addViewForm.display" placeholder="请选择状态">
            <el-option label="启用" value="1"></el-option>
            <el-option label="关闭" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传图像">
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccessAdd"
              :before-upload="beforeAvatarUploadAdd"
              name="file">
            <img v-if="imageUrlAdd" :src="imageUrlAdd" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addView">确 定</el-button>
                <el-button @click="addDialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>
    <!--修改图像-->
    <el-dialog title="修改图像" :visible.sync="editDialogVisible" width="50%"  :close-on-click-modal="false" @close="editViewFormClose">
      <el-form
          :model="editViewForm"
          :rules="editViewFormRules"
          ref="editViewFormRef"
          label-width="100px"
          class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="editViewForm.title"></el-input>
        </el-form-item>
        <el-form-item label="图像" prop="image">
          <el-input v-model="editViewForm.image" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="display">
          <el-select v-model="editViewForm.display" placeholder="请选择状态">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="关闭" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传图像">
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccessEdit"
              :before-upload="beforeAvatarUploadEdit"
              name="file">
            <img v-if="imageUrlEdit" :src="imageUrlEdit" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editView">确 定</el-button>
                <el-button @click="addDialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ViewPage",
  data() {
    return {
      viewList: [],
      pageSize: 3,
      pageNum: 1,
      total: 0,
      title: '',
      addDialogVisible: false,
      addViewForm: {
        title: '',
        image: '',
        url: '',
        display: ''
      },
      uploadUrl: 'http://localhost:9999/ViewPage/upload',
      imageUrlAdd: '',
      addViewFormRules: {
        title: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        image: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        display: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
      },
      editDialogVisible: false,
      editViewForm: {
        title: '',
        image: '',
        url: '',
        display: ''
      },
      imageUrlEdit: '',
      editViewFormRules: {
        title: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        image: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        display: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
      },
    }
  },
  methods: {
    handleSelectionChange() {

    },
    handleAvatarSuccessAdd(res, file) {
      this.imageUrlAdd = URL.createObjectURL(file.raw);
      this.addViewForm.url = res.data;
      this.addViewForm.image = res.data;
    },
    beforeAvatarUploadAdd(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccessEdit(res, file) {
      this.imageUrlEdit = URL.createObjectURL(file.raw);
      this.editViewForm.url = res.data;
      this.editViewForm.image = res.data;
    },
    beforeAvatarUploadEdit(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    addViewFormClose() {
      this.addDialogVisible = false;
      this.imageUrlAdd = '';
      this.addViewForm = {};
      this.initViewPageList();

    },
    addView() {
      this.$refs.addViewFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "/ViewPage/add";
        this.$axios.post(url, this.addViewForm)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                });
                this.addDialogVisible = false;
                this.initViewPageList();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      })
    },
    editViewFormClose() {
      this.editDialogVisible = false;
      this.imageUrlEdit = '';
      this.editViewForm = {};
      this.initViewPageList();
    },
    showEditDialog(row) {
      this.editDialogVisible = true;
      this.editViewForm = row;
      this.imageUrlEdit = this.editViewForm.url;
      this.initViewPageList();
    },
    editView() {
      this.$refs.editViewFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "/ViewPage/modify";
        this.$axios.put(url, this.editViewForm)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                });
                this.editDialogVisible = false;
                this.initViewPageList();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      })
    },
    removeViewById(id) {
      this.$confirm('此操作将永久删除该图像, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "ViewPage/del/" + id;
        this.$axios.delete(url)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                });
                this.initViewPageList();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    switchViewState(row) {
      //console.log(row);
      let url = "/ViewPage/modify";
      this.$axios.put(url, row)
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: res.data.msg,
                duration: 1000
              });
              this.editDialogVisible = false;
              this.initViewPageList();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNum = 1;
      this.initViewPageList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initViewPageList();
    },
    searchView() {
      this.initViewPageList();
    },
    initViewPageList() {
      let url = "ViewPage/list";
      this.$axios.get(url, {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          title: this.title
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.viewList = res.data.data.list;
          this.pageSize = res.data.data.pageSize;
          this.pageNum = res.data.data.pageNum;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    }
  },
  created() {
    this.initViewPageList();
  }
}
</script>

<style scoped>

</style>